<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #input {
            width: 25px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="button" value="重新开始一局游戏" onclick="reset()"> <br>
        请输入要猜的数字: <input type="text" name="" id="input"> <input type="button" value="猜" onclick="guess()"> <br>
        <!-- 这里的次数肯定是需要修改的，因此得用标签包裹起来，方便后续去使用 -->
        已经猜的次数: <span id="times">0</span> <br>
        <!-- 同理这里的结果也是如此 -->
        结果: <span id="result"></span>
    </div>

    <script>
        // 重置对局
        function reset() {
            // 清空所有数据并重新生成随机数
            number = generateRandomNumbers();
            console.log(number);
            let input = document.querySelector('#input');
            input.value = '';
            let result = document.querySelector('#result');
            result.innerText = '';
            let times = document.querySelector('#times');
            times.innerText = 0;
        }

        // 猜
        function guess() {
            // 获取输入框的值，将其与随机数进行对比，根据比较结果来更新次数和结果
            let input = document.querySelector('#input');
            // console.log(input.value);
            let value = input.value;
            if (value == '') {
                alert('请输入要猜的数字!');
                return;
            }
            if (typeof(value) != number) {
                alert('请输入数字!');
                return;
            }
            let result = document.querySelector('#result');
            let times = document.querySelector('#times');
            if (value == number) {
                result.innerText = 'This guess number is answer! You are right, boy or girl';
            } else if (value < number) {
                result.innerText = 'This guess number is so small';
            } else {
                result.innerText = 'This guess number is so big';
            }
            console.log(times);
            
            times.innerHTML++;
        }


        // 生成随机数: 1-100
        function generateRandomNumbers() {
            return parseInt(Math.random() * 100) + 1;
        }

        let number = generateRandomNumbers();
        console.log(number);
        
    </script>
</body>
</html>